<template>
	<div id="app">
		<!--应用程序栏-->
		<v-app-bar app color="#FF5252">
			<v-list-item-title style="text-align: center;font-size:18px;color:white">我的资料</v-list-item-title>
			<v-btn elevation="0" small color="#FF5252" router-link :to="{ path: '/main/mine' }" class="go_back">
				<icon name="back" scale="2" color="white"></icon>
			</v-btn>
		</v-app-bar>
		<!--用户信息展示-->

		<v-card elevation="0" style="padding: 0 2%">
			<v-row style="padding-top: 2%;width: 100%;margin: 0;">
				<v-avatar size="80" style="margin: 0 auto;text-align: center;">
					<img :src="userInfo.avatar" alt="John" @click.stop="uploadHeadImg">
				</v-avatar>
				<input type="file" accept="image/*" @change="handleFile" class="hiddenInput" style="display: none;" />
			</v-row>

			<div style="width: 100%;margin: 0 auto;text-align: center;padding-top: 2%;"><input type="text" v-model="name"
					maxlength="5" style="width: 20%;text-align: center;" />
				<icon name="modify"></icon>
			</div>
			<v-col width="100%">
				<v-list>
					<icon name="news" scale="2"></icon><span style="margin-left:2% ;font-size: 17px;">社交信息</span>
				</v-list>
				<div style="color: grey;font-size: 12px;">越多的完善，越有助于在其他房东或者房客中产生信任哦</div>
			</v-col>
			<v-divider></v-divider>
			<v-col>
				<v-list>个性签名</v-list>
				<v-textarea outlined name="input-7-4" label="展示您的个性签名吧" v-model="textarea" counter="45" maxlength="45" style="font-size: 13px;color: grey;"></v-textarea>
			</v-col>
			<v-divider></v-divider>


			<v-col width="100%">
				<v-list>
					<icon name="information" scale="2"></icon><span style="margin-left:2% ;font-size: 17px;">基本信息</span>
				</v-list>
				<div style="color: grey;font-size: 12px;">随心所欲，想填就填</div>
			</v-col>
			<v-divider></v-divider>
			<v-col style="padding: 0;">
				<div style="float: left;width: 100%;padding:12px 0 5px ;margin: 4px 0 0;border-bottom:1px solid gray">
					<label style="font-size: 15px;color:gray;float: left;">性別</label>
					<select v-model="sex" style="width:15% ;margin-right: 0;float: right;" class="select">
						<option value="1" style="text-align: center;">女</option>
						<option value="2" style="text-align: center;">男</option>
					</select>
				</div>
				<div class="clearfloat"></div>
				<div style="padding-top:9px;"></div>
				<v-text-field v-model="education" label="教育背景" placeholder=""></v-text-field>
				<v-text-field v-model="work" label="工作信息" placeholder=""></v-text-field>
			</v-col>
			<div style="margin: 0 auto;text-align: center;">
				<v-btn center color="#FF5252" class="mr-4" style="font-size: 18px;color:white;width:60% !important; " @click="update">
					保存信息
				</v-btn>
			</div>
		</v-card>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>
	</div>
</template>

<script>
	import axios from "axios";

	export default {
		name: "Information",
		data() {
			return {
				name: "苦瓜",
				userInfo: {
					avatar: require("../../../../static/my/test.png")
				},
				textarea: '',
				timeout: 2000,
				items: [{
						value: 1,
						sex: '女',

					}, {
						value: 2,
						sex: '男',
					}

				],
				snackbar: false,
				message: '',
				sex: '',
				education: '',
				work: '',
				// 初始图片
			}
		},
		methods: {
			getUserInfo() {
				let _this = this
				axios
					.get("/api/v1.0/user/get_user")
					.then(function(response) {
						if (response.data.errno === '0') {
							_this.name = response.data.data.name;
							_this.textarea = response.data.data.sign;
							_this.sex = response.data.data.sex;
							_this.education = response.data.data.education;
							_this.work = response.data.data.works;
							_this.userInfo.avatar = response.data.data.avatar;
						} else if (response.data.errno === '4101') {
							// 未登跳转到登录页面
							console.log(0)
							_this.goLogin()
						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			},
			goLogin() {
				this.$router.replace({
					path: "/login"
				});
			},
			// 打开图片上传
			uploadHeadImg() {
				this.$el.querySelector('.hiddenInput').click()
			},
			// 将头像显示 看后端需要传递base64字节还是传递文件
			handleFile(e) {
				let $target = e.target || e.srcElement
				let file = $target.files[0]
				var reader = new FileReader()
				reader.onload = (data) => {
					let res = data.target || data.srcElement
					this.userInfo.avatar = res.result
				}
				reader.readAsDataURL(file)
				let data = new FormData()
				data.append('image_file', file)
				this.userInfo.avatar = file
				let _this = this;
				axios
					.post("/api/v1.0/users/avatar", data, {
						headers: {
							'Content-Type': 'multipart/form-data',
						},
					})
					.then(function(response) {
						if (response.data.errno == '0') {
							// 保存头像成功提示信息
							_this.userInfo.avatar = response.data.data.image_url
							console.log(_this.userInfo.avatar)
						} else if (response.data.errno == '4101') {
							// 未登跳转到登录页面
							setTimeout(function() {
								_this.$router.replace({
									path: "/login"
								});
							}, 1000);
						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			},
			update() {
				let _this = this;
				axios
					.put("/api/v1.0/user/update", {
						name: _this.name,
						sex: _this.sex,
						works: _this.work,
						sign: _this.textarea,
						education: _this.education,
						avatar_url: _this.userInfo.avatar,
					})
					.then(function(response) {
						if (response.data.errno === '0') {
							// 保存信息成功提示信息
							_this.snackbar = true;
							_this.message = response.data.errmsg;
							setTimeout(function() {
								location.reload()
							}, 1000);
						} else if (response.data.errno === '4101') {
							// 未登跳转到登录页面
							_this.goLogin()
						} else {
							// 保存失败提示信息
							_this.snackbar = true;
							_this.message = '保存失败';
						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			}
		},
		mounted() {
			this.getUserInfo();
		}
	}
</script>

<style scoped>
	.select {
		display: inline-block;
		position: relative;
		vertical-align: middle;
		padding: 0;
		overflow: hidden;
		background-color: #fff;
		color: #555;
		border: 1px solid #aaa;
		text-shadow: none;
		border-radius: 4px;
		transition: box-shadow 0.25s ease;
		z-index: 2;
		/* -webkit-appearance: listbox !important; */
	}

	.select:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-top-color: #ccc;
		top: 14px;
		right: 10px;
		cursor: pointer;
		z-index: -2;
	}

	.select select {
		cursor: pointer;
		padding: 10px;
		width: 100%;
		border: none;
		background: transparent;
		background-image: none;
		-moz-appearance: none;
	}

	.select select:focus {
		outline: none;
	}
</style>


<style>
	.v-label {
		font-size: 15px !important;
	}

	/* 所有文本域的颜色 */
	textarea {
		color: grey !important;
		resize: none;
	}

	.col {
		margin: 0 auto;
		width: 95%;
	}
</style>
